import React, { Component } from 'react'
import {Layout, Breadcrumb} from 'antd';
import SiderItem from '../component/sider';
import FooterItem from '../component/footer';
import HaderItem from '../component/hader';
import {connect} from 'react-redux';
import logo from '../../public/static/images/logo.png';
import '../../src/App.less';
class Main extends Component {
    constructor(props){
        super(props);
        this.state = {
            collapsed: false
        }
    }
    onCollapse = () => {
        this.setState({ 
            collapsed:!this.state.collapsed
         });
      }
  render() {
    const { Header, Content, Footer, Sider} = Layout;
    return (
      <div>
          <Layout style={{ minHeight: '100vh' }}>
            <Sider
            collapsed={this.state.collapsed}
            >
            <div className="logo">
                <img src={logo} alt="颂车网"/>
            </div>
                <SiderItem />
            </Sider>
            <Layout>
            <Header style={{ background: '#fff', padding: 0 }} >
                <HaderItem   onTigger={this.onCollapse}/>
            </Header>
            <Content style={{ margin: '0 16px' }}>
            <Breadcrumb style={{ margin: '16px 0' }}>
                <Breadcrumb.Item>首页</Breadcrumb.Item>
                <Breadcrumb.Item>{this.props.titelName}</Breadcrumb.Item>
            </Breadcrumb>
               {this.props.children}
            </Content>
            <Footer style={{ textAlign: 'center' }}>
               <FooterItem/>
            </Footer>
            </Layout>
        </Layout>
      </div>
    )
  }
}
const getTitelStore = state=> {
   return { titelName:state.titelName }
}
export default  connect(getTitelStore)(Main)